<template>

    <div class="flex-row flex-justify-c flex-align-c" style="height:100vh" :xs="24"  :xl="5">
    <div class="login-new-container flex-row">
      <div class="login-left flex-row flex-justify-c flex-align-c">
        <img src="@/assets/login/register-bg.jpg" alt />
        <p class="header-title" style="font-size:20px;color:#fff;z-index:2;">{{sitename}}</p>
      </div>
      <div
        class="login-container flex-col"
        style="position: relative;padding: 100px 60px;background: #fff;border-radius: 0 3px 3px 0;"
      >
        <!-- 右上方二维码 -->
        <div class="login-qrcode">
          <img
            @click="qrcodeLogin"
            :class="isQrcodeLogin ? 'login-qrcode-img_2' : 'login-qrcode-img_1'"
            :src="isQrcodeLogin ? require('@/assets/image/12.png') : require('@/assets/image/11.png')"
            alt
          />
        </div>
        <div class="login-qrcode-no"></div>
        <!-- 右上方文字 -->
        <div class="login-qrcode-tip">
          <p class="login-qrcode-text">{{isQrcodeLogin ? '密码登录' : '扫码登录'}}</p>
        </div>
        <div class="login-qrcode-tip-r"></div>
        <div class="account-header flex-col flex-align-c flex-justify-c">
          <!-- <img style="border-radius: 50%;" :src="logoImg" width="90" height="90" alt=""> -->
          <p class="login-new-denglu">{{isQrcodeLogin ? '扫码登录' : '密码登录'}}</p>
        </div>
        <div class="account-body">
          <!-- 扫码登录 -->
          <div v-if="isQrcodeLogin" class="login-qrcode-ac" v-loading="qrcodeImgLoding">
            <img :src="qrcodeImg" style="width:100%;height:100%" alt />
          </div>

          <!-- 账号登录 -->
          <el-form
            v-if="!isQrcodeLogin"
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
            auto-complete="on"
            label-position="left"
          >
            <el-form-item class="no-nowrap" prop="username">
              <span class="svg-container">
                <svg-icon icon-class="user" />
              </span>
              <el-input
                v-model="loginForm.username"
                :placeholder="$t('login.username')"
                name="username"
                type="text"
                auto-complete="on"
              />
            </el-form-item>

            <el-form-item class="no-nowrap" prop="password">
              <span class="svg-container">
                <svg-icon icon-class="password" />
              </span>
              <el-input
                :type="passwordType"
                v-model="loginForm.password"
                :placeholder="$t('login.password')"
                name="password"
                auto-complete="on"
                @keyup.enter.native="handleLogin"
              />
              <span class="show-pwd" @click="showPwd">
                <svg-icon :icon-class="passwordType === 'password'?'eye':'showpassword'" />
              </span>
            </el-form-item>
            <el-form-item
              class="no-nowrap func-form-item"
              style="margin-bottom: 20px;margin-left:5px;"
            >
              <div class="flex-row flex-justify-b flex-align-c">
                <span class="pull-left">
                  <el-checkbox v-model="loginForm.keeplogin">记住帐号</el-checkbox>
                </span>
                <span class="pull-right">
                  <!-- <a href="#/account/forget" class="forget" target="_blank">忘记密码?</a> -->
                </span>
              </div>
            </el-form-item>
            <div class="flex-row flex-justify-c">
              <el-button type="primary" @click="handleLogin" round style="width: 160px;">登录</el-button>
            </div>
            <!-- <button type="button" class="account-btn ivu-btn" @click="handleLogin"><span>登录</span></button> -->
          </el-form>

          <!-- <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog" append-to-body>
      {{ $t('login.thirdpartyTips') }}
      <br>
      <br>
      <br>
      <social-sign />
          </el-dialog>-->
        </div>
      </div>
    </div>
  </div>

  
</template>

<script>
import LangSelect from '@/components/LangSelect'
import SocialSign from './socialsignin'
import mixins from '@/views/login/mixins'
import '@/styles/login.scss'
import Cookies from 'js-cookie'
import { setIndependent,setAgent} from '@/utils/auth'
import { adminLogoInfo, loginQrcode, loginQrcodeResult } from '@/api/login'
export default {
  name: 'Login',
  mixins: [mixins],
  components: { LangSelect, SocialSign },
  data() {
    return {
      logoImg: '',
      loginForm: {
        username: '',
        password: '',
        keeplogin: true
      },
      patSetting: {},
      loading: false,
      showDialog: false,
      redirect: undefined,
      // 是否扫码登录
      isQrcodeLogin: false,
      qrcodeImg: '',
      qrcodeImgLoding: true
    }
  },
  directives: {},
  watch: {
    $route: {
      // 监听router
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  computed: {
    sitename() {
      return this.$store.getters.sitename
    }
  },
  created() {
    if (window.location.hostname !== 'localhost' && !Cookies.get('BASE_API')) {
      location.href = location.origin
    }
    this.$nextTick(() => {
      adminLogoInfo().then((res) => {
        const { logo = '', copyright, sitename } = res.data.data
        this.logoImg = logo
        this.$store.dispatch('setCopyright', copyright)
        this.$store.dispatch('setSitename', sitename)
        this.$store.dispatch('setLogo', logo)
      })
    })
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan)
  },
  mounted() {
    // this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
    //   this.loading = false
    //   this.$router.push({ path: this.redirect || '/' })
    // }).catch(() => {
    //   this.loading = false
    // })
  },
  methods: {
    qrLogin(qrcodeData) {
      this.loading = true
      this.$store
        .dispatch('qrcodeLogin', qrcodeData)
        .then((res) => {
          this.loading = false
          // console.log(this.redirect) this.redirect || '/'
          const { edition } = res || {}
          if (edition) {
            // 如果是独立版的，就要进入平台选择页面
            // 给vuex app设置independent存储起来
            this.$store.commit('SET_INDEPENDENT', true)
            setIndependent(true)
            this.$router.push({
              path: '/edition-list/edition',
              replace: true
            }) // 这里进入独立版的用户平台选择页面
          } else {
            this.$router.push({ path: '/' }) // 从这开始就接着权限操作
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 轮询查证扫码结果
    qrcodeLoginResult() {
      loginQrcodeResult().then((res) => {
        if (this.qrcodeImgLoding) {
          return ''
        }
        // 登录失败
        if (res.data.code === 0) {
          this.$message.error(res.data.msg)
        } else if (res.data.code === 1 && res.data.data === false) {
          this.qrcodeLoginResult()
        } else {
          // 扫码成功，正式发起登录
          this.qrLogin(res.data.data)
        }
      })
    },
    // 获取扫码登录二维码
    qrcodeLogin() {
      console.log('扫码登录')
      this.isQrcodeLogin = !this.isQrcodeLogin
      if (this.isQrcodeLogin) {
        // 扫码登录
        loginQrcode().then((res) => {
          if (res.data.code == 1) {
            this.qrcodeImg = res.data.data
            this.qrcodeImgLoding = false
            this.qrcodeLoginResult()
          }
        })
      } else {
        // 取消扫码登录
        this.qrcodeImgLoding = true
      }
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    handleLogin() {
      // console.log('login')
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          console.log(this.loginForm, '5555555555555555')
          this.$store
            .dispatch('LoginByUsername', this.loginForm)
            .then((res) => {
              this.loading = false
              // console.log(this.redirect) this.redirect || '/'
              const { edition,power = '' } = res || {}
              if (edition) {
                // 如果是独立版的，就要进入平台选择页面
                // 给vuex app设置independent存储起来
                console.log("和发动机号",res.agent_id)
                this.$store.commit('SET_INDEPENDENT', true)
                //判断是否有agent_id
                if(res.agent_id){
                this.$store.commit('H_AID',res.agent_id)
                //有的话就把它存进cooking中
                setAgent(res.agent_id)
                }
                setIndependent(true)

                //判断是否直接进入平台
                if(!!power){
                  this.$router.replace({ path: '/' });
                }else{
                  this.$router.push({
                    path: '/edition-list/edition',
                    replace: true
                  }) // 这里进入独立版的用户平台选择页面
                }
              } else {
                this.$router.push({ path: '/' }) // 从这开始就接着权限操作
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    toRegister() {
      this.$router.push({ path: '/login/register' })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login-qrcode-ac {
  width: 280px;
  height: 280px;
  margin: 0 auto;
}

.login-qrcode {
  position: absolute;
  width: 100px;
  height: 100px;
  right: 0px;
  top: 0px;
}
.login-qrcode-no {
  position: absolute;
  width: 80px;
  height: 129px;
  right: 40px;
  top: 13px;
  border-right: 1px #eee solid;
  background: rgb(255, 255, 255);
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg); /* IE 9 */
  -moz-transform: rotate(-45deg); /* Firefox */
  -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
  -o-transform: rotate(-45deg);
}

.login-qrcode-img_1 {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.login-qrcode-img_2 {
  width: 45px;
  height: 45px;
  margin-left: 45px;
  margin-top: 10px;
  cursor: pointer;
}

.login-qrcode-tip {
  position: absolute;
  width: 100px;
  height: 35px;
  right: 95px;
  top: 16px;
  background: #e2edfd;
  border: 2px #409eff solid;
}

.login-qrcode-tip-r {
  position: absolute;
  width: 10px;
  height: 10px;
  right: 90px;
  top: 28px;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  background: #e2edfd;
  border: 2px #409eff solid;
  border-top: none;
  border-left: none;
}

.login-qrcode-text {
  font-size: 12px;
  text-align: center;
  line-height: 33px;
  font-weight: bold;
  letter-spacing: 1px;
}
</style>
